<template>
    <div class="app-container">
        <!-- 搜索框 -->
        <el-form ref="queryRef" :inline="true" label-width="68px">
            <el-form-item label="分类">
                <!-- 分类级联选择器，用于选择商品分类 -->
                <!-- v-model 用于数据绑定，监听 change 事件以处理选择的变化 -->
                <el-cascader v-model="queryCategoryIdList" @change="handleCategoryChange" :props="categoryProps"
                    style="width: 100%" />
            </el-form-item>
            <el-form-item label="规格名称" prop="specName">
                <!-- 输入框，用于输入规格名称 -->
                <!-- v-model 双向绑定输入的规格名称，按下回车时调用 handleQuery 方法 -->
                <el-input v-model="queryParams.specName" @keyup.enter="handleQuery" placeholder="请输入规格名称" clearable />
            </el-form-item>
            <el-form-item>
                <!-- 搜索和重置按钮 -->
                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <!-- 功能按钮栏 -->
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <!-- 新增按钮，点击调用 handleAdd 方法 -->
                <el-button type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
            </el-col>
            <el-col :span="1.5">
                <!-- 修改按钮，禁用状态根据 noSingle 的值变化 -->
                <el-button type="success" plain icon="Edit" :disabled="noSingle" @click="handleUpdate">修改</el-button>
            </el-col>
            <el-col :span="1.5">
                <!-- 删除按钮，禁用状态根据 noSelect 的值变化 -->
                <el-button type="danger" plain icon="Delete" :disabled="noSelect" @click="handleDelete">删除</el-button>
            </el-col>
            <!-- 工具栏组件，显示隐藏搜索框等功能 -->
            <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>
        <!-- 数据展示表格 -->
        <el-table :data="specList" @selection-change="handleSelectionChange">
            <!-- 表格的选择列 -->
            <el-table-column type="selection" width="55" align="center" />
            <!-- 分类名称列 -->
            <el-table-column label="分类名称" prop="categoryName" width="120" />
            <!-- 规格名称列 -->
            <el-table-column label="规格名称" align="left" prop="specName" width="120" />
            <!-- 规格值列，使用作用域插槽显示复杂内容 -->
            <el-table-column label="规格值" #default="scope">
                <div v-for="(item1, index1) in scope.row.specValueList" :key="index1"
                    style="padding: 5px; margin: 0;width: 100%;">
                    <!-- 迭代显示规格值 -->
                    {{ item1.key }}：
                    <span v-for="(item2, index2) in item1.valueList" :key="index2" class="div-atrr">
                        {{ item2 }}
                    </span>
                </div>
            </el-table-column>
            <!-- 创建时间列 -->
            <el-table-column prop="createTime" label="创建时间" width="160" />
            <!-- 操作列，包含修改和删除按钮 -->
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="160">
                <template #default="scope">
                    <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)">修改</el-button>
                    <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页条组件 -->
        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize" @pagination="getList" />

        <!-- 添加或修改商品规格对话框 -->
        <el-dialog :title="title" v-model="open" width="500px" append-to-body>
            <el-form ref="specRef" :model="form" :rules="rules" label-width="80px">
                <el-form-item label="分类" prop="categoryIdList">
                    <!-- 分类级联选择器，用于选择商品分类 -->
                    <el-cascader :props="categoryProps" v-model="form.categoryIdList" />
                </el-form-item>
                <el-form-item label="规格名称" prop="specName">
                    <!-- 规格名称输入框 -->
                    <el-input v-model="form.specName" placeholder="请输入规格名称" />
                </el-form-item>
                <el-form-item>
                    <!-- 属性值列表，支持增删 -->
                    <div v-for="(item1, index1) in specValueList" :key="index1" style="padding: 10px; margin: 0;">
                        {{ item1.key }}：
                        <span v-for="(item2, index2) in item1.valueList" :key="index2" class="div-atrr">
                            {{ item2 }}
                        </span>
                        <el-button size="small" @click="removeAttr(index1)">删除</el-button>
                        <br />
                    </div>
                </el-form-item>
                <el-form-item label="">
                    <el-row v-if="isAdd">
                        <el-col :span="10">
                            <!-- 新增规格名输入框 -->
                            <el-input v-model="specValue.key" placeholder="规格" style="width: 90%;" />
                        </el-col>
                        <el-col :span="10">
                            <!-- 新增规格值输入框 -->
                            <el-input v-model="specValue.values" placeholder="规格值(如:白色,红色)" style="width: 90%;" />
                        </el-col>
                        <el-col :span="4">
                            <!-- 添加规格值按钮 -->
                            <el-button size="default" @click="addSpecValue">添加</el-button>
                        </el-col>
                    </el-row>
                    <el-row v-if="!isAdd">
                        <el-col :span="4" align="left">
                            <!-- 显示添加新规格按钮 -->
                            <el-button size="default" @click="isAdd = true">
                                添加新规格
                            </el-button>
                        </el-col>
                    </el-row>
                </el-form-item>

            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <!-- 对话框底部的确认和取消按钮 -->
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </div>
            </template>
        </el-dialog>

    </div>
</template>

<script setup>
import { listSpec, addSpec, getSpec, updateSpec, delSpec } from "@/api/product/productSpec";
import { getTreeSelect } from "@/api/product/category";
// =================================================const============================================================================================================
// 定义 ref 和 reactive 变量用于响应式数据

// 批量操作 ID 列表，用于记录选中的行ID
const ids = ref([]);

// 控制单选状态
const noSingle = ref(true);

// 控制多选状态
const noSelect = ref(true);

// 获取当前组件实例
const { proxy } = getCurrentInstance();

// 控制显示/隐藏搜索框
const showSearch = ref(true);

// 表格数据模型，存储表格展示的数据
const specList = ref([]);

// 控制弹出层的打开与关闭
const open = ref(false);

// 弹出层标题
const title = ref("");

// 树形下拉框的数据模型
const props = {
    lazy: true,
    value: 'id',
    label: 'name',
    leaf: 'leaf',
    async lazyLoad(node, resolve) {   // 加载数据的方法
        const { level } = node;
        if (typeof node.value == 'undefined') node.value = 0;
        const { code, data, message } = await getTreeSelect(node.value);
        // hasChild判断是否有子节点
        data.forEach(item => {
            item.leaf = !item.hasChildren; //无子节点值为true 分类上不显示小三角
        });
        resolve(data)  // 返回数据
    }
};

// 分类属性的配置
const categoryProps = ref(props);

// 总记录数，用于分页
const total = ref(0);

// 加载过程中的 loading 状态
const loading = ref(true);

// 级联选择器中选中的分类ID列表
const queryCategoryIdList = ref([]);

// 响应式数据源，包含表单参数及验证规则
const data = reactive({
    queryParams: {
        pageNum: 1,
        pageSize: 10,
        categoryId: null,
        specName: null
    },
    form: {
        id: null,
        specName: null,
        specValue: null,
        categoryId: null,
        categoryIdList: []
    },
    rules: {
        categoryIdList: [
            { required: true, message: "分类不能为空", trigger: "blur" }
        ],
        specName: [
            { required: true, message: "规则名称不能为空", trigger: "blur" }
        ],
        specValue: [
            { required: true, message: "规格值不能为空", trigger: "blur" }
        ]

    }
});

// 解构响应式数据
const { queryParams, form, rules } = toRefs(data);

// 编辑规格时的标识
const isAdd = ref(false);
const specValue = ref({ key: '', values: '' });
const specValueList = ref([]);
// =================================================function====================================================================================================
/** 删除按钮操作 */
function handleDelete(row) {
    const _ids = row.id || ids.value;
    // 弹出确认删除对话框，删除产品规格
    proxy.$modal.confirm('是否确认删除商品规格编号为"' + _ids + '"的数据项？').then(function () {
        return delSpec(_ids);
    }).then(() => {
        // 刷新列表
        getList();
        proxy.$modal.msgSuccess("删除成功");
    }).catch(() => { });
}

// 点击修改按钮操作
function handleUpdate(row) {
    reset(); // 重置表单中的数据
    const _id = row.id || ids.value
    // 回显要修改项的数据
    getSpec(_id).then(response => {
        form.value = response.data;
        open.value = true; // 打开表单
        title.value = "修改商品规格"; // 设置标题

        // 解析规格值 JSON 信息
        specValueList.value = JSON.parse(form.value.specValue)
    });
}

// 多选框选中数据操作
function handleSelectionChange(selection) {
    // 获取选中行的 id
    ids.value = selection.map(item => item.id);
    noSingle.value = selection.length != 1; // 是否为单选
    noSelect.value = !selection.length; // 是否有任何选项
}

// 提交表单按钮，新增或更新规格
function submitForm() {
    proxy.$refs.specRef.validate(async valid => {
        if (valid) {
            // 序列化规格值列表
            const { id, specName, categoryIdList, specValue } = form.value;
            const params = {
                id,
                specName,
                specValue: JSON.stringify(specValueList.value),
                categoryId: categoryIdList[2] // 取第三级分类ID
            }
            if (form.value.id != null) {
                // 如果 ID 不为空，调用更新方法
                const { code, message } = await updateSpec(params);
                if (code == 200) {
                    proxy.$modal.msgSuccess("修改成功");
                    open.value = false;
                    getList();
                } else {
                    proxy.$modal.msgError(message);
                }
            } else {
                // 否则调用新增方法
                const { code, message } = await addSpec(params);
                if (code == 200) {
                    proxy.$modal.msgSuccess("新增成功");
                    open.value = false;
                    getList();
                } else {
                    proxy.$modal.msgError(message);
                }
            }

        }
    })
}

// 取消按钮，关闭弹出框并重置表单
function cancel() {
    open.value = false;
    reset();
}

// 新增按钮操作，打开新建规格弹出框
function handleAdd() {
    reset(); // 重置表单
    open.value = true;
    title.value = "添加商品规格";
    specValueList.value = [] // 清空规格值列表
}

// 重置表单数据
function reset() {
    // 清空表单数据对象
    form.value = {
        id: null,
        specName: null,
        specValue: null,
        categoryId: null,
        categoryIdList: []
    };
    proxy.resetForm("specRef"); // 重置表单验证状态
}

// 添加属性值
const addSpecValue = () => {
    // 将输入的规格名与值新增到规格值列表中
    specValueList.value.push({
        key: specValue.value.key,
        valueList: specValue.value.values.split(',')
    })
    specValue.value = {} // 重置输入框
    isAdd.value = false // 设置为非新增状态
}

// 删除属性值
const removeAttr = (index) => {
    // 从规格值列表中移除指定索引的项
    specValueList.value.splice(index, 1)
}

// 级联选择器回调函数，处理分类变化
const handleCategoryChange = () => {
    // 如果选中了三级分类，则更新分类ID
    if (queryCategoryIdList.value.length == 3) {
        queryParams.value.categoryId = queryCategoryIdList.value[2]; // 更新分类 ID
    }
}

// 搜索按钮操作，重置分页并查询数据
function handleQuery() {
    queryParams.value.pageNum = 1; // 将页码重置为第一页
    getList(); // 调用查询列表方法
}

// 重置搜索按钮，清空条件并重新查询
function resetQuery() {
    queryParams.value.specName = null;
    queryParams.value.categoryId = null;
    queryCategoryIdList.value = [];
    handleQuery();
}

// 查询商品规格列表
function getList() {
    loading.value = true; // 设置加载状态为 true
    console.log(queryParams);

    listSpec(queryParams.value).then(response => {
        specList.value = response.rows; // 将响应的数据赋值给 specList
        specList.value.forEach(function (item) {
            // 解析规格值 JSON 数据
            item.specValueList = JSON.parse(item.specValue)
        });
        total.value = response.total; // 设置总记录数
        loading.value = false; // 设置加载状态为 false
    });
}

getList(); // 初始化时加载数据
</script>

<style scoped>
.div-atrr {
    padding: 5px 10px;
    margin: 0 10px;
    background-color: powderblue;
    border-radius: 10px;
}
</style>